<template>
  <div class="msg-praise">
      <nav class="message-nav">
          <ul>
              <li  @click = "gotoAddress('/me/mymessage')">
                <span>私信</span>
                <b class="badgate"></b>
              </li>
              <li @click = "gotoAddress('/me/msgdiscuss')">
                <span>评论</span>
              </li>
              <li class="on" @click = "gotoAddress('/me/msgpraise')">
                <span>赞</span>
              </li>
              <li @click = "gotoAddress('/me/msgfans')">
                <span>新粉丝</span>
              </li>
              <li @click = "gotoAddress('/me/msgnews')">
                <span>通知</span>

              </li>
          </ul>
      </nav>
      <div class="no-msg-content">
        <div class="no-msg">
          <img src="../../assets/me/01.png" alt="">
        </div>
        <div class="no-text">
          还没有收到赞哦！
        </div>
      </div>
      <div class="msg-content">
          <ul>
            <li class="">
              <div class="ask clearFix">
                <div class="fl img-box">
                  <div class="img">
                    <img class="icon fl" src="https://dummyimage.com/40x40">
                    <b class="badgate">3</b>
                  </div>
                </div>
                <div class="fl font-box">
                  <p>Atengyaaa</p>
                  <div class="clearfix con-time">
                    <div class="fl">
                      <p class="con">赞了你的文章</p>
                    </div>
                    <div class="fr">
                      <p class="time">6个小时前</p>
                    </div>
                  </div>
                  <div class="answer clearFix">
                    <img class="icon fl" src="https://dummyimage.com/40x40">
                    <div class="fl">
                      <p>莉莉</p>
                      <p>文本标签文本标签文本标签</p>
                    </div>
                  </div>

                </div>
              </div>
            </li>
            <li class="">
              <div class="ask clearFix">
                <div class="fl img-box">
                  <div class="img">
                    <img class="icon fl" src="https://dummyimage.com/40x40">
                    <b class="badgate">3</b>
                  </div>
                </div>
                <div class="fl font-box">
                  <p>Atengyaaa</p>
                  <div class="clearfix con-time">
                    <div class="fl">
                      <p class="con">赞了你的文章</p>
                    </div>
                    <div class="fr">
                      <p class="time">6个小时前</p>
                    </div>
                  </div>
                  <div class="answer clearFix">
                    <img class="icon fl" src="https://dummyimage.com/40x40">
                    <div class="fl">
                      <p>莉莉</p>
                      <p>文本标签文本标签文本标签</p>
                    </div>
                  </div>

                </div>
              </div>
            </li>
            <li class="">
              <div class="ask clearFix">
                <div class="fl img-box">
                  <div class="img">
                    <img class="icon fl" src="https://dummyimage.com/40x40">
                    <b class="badgate">3</b>
                  </div>
                </div>
                <div class="fl font-box">
                  <p>Atengyaaa</p>
                  <div class="clearfix con-time">
                    <div class="fl">
                      <p class="con">赞了你的文章</p>
                    </div>
                    <div class="fr">
                      <p class="time">6个小时前</p>
                    </div>
                  </div>
                  <div class="answer clearFix">
                    <img class="icon fl" src="https://dummyimage.com/40x40">
                    <div class="fl">
                      <p>莉莉</p>
                      <p>文本标签文本标签文本标签</p>
                    </div>
                  </div>

                </div>
              </div>
            </li>
            <li class="">
              <div class="ask clearFix">
                <div class="fl img-box">
                  <div class="img">
                    <img class="icon fl" src="https://dummyimage.com/40x40">
                    <b class="badgate">3</b>
                  </div>
                </div>
                <div class="fl font-box">
                  <p>Atengyaaa</p>
                  <div class="clearfix con-time">
                    <div class="fl">
                      <p class="con">赞了你的文章</p>
                    </div>
                    <div class="fr">
                      <p class="time">6个小时前</p>
                    </div>
                  </div>
                  <div class="answer clearFix">
                    <img class="icon fl" src="https://dummyimage.com/40x40">
                    <div class="fl">
                      <p>莉莉</p>
                      <p>文本标签文本标签文本标签</p>
                    </div>
                  </div>

                </div>
              </div>
            </li>
            <li class="">
              <div class="ask clearFix">
                <div class="fl img-box">
                  <div class="img">
                    <img class="icon fl" src="https://dummyimage.com/40x40">
                    <b class="badgate">3</b>
                  </div>
                </div>
                <div class="fl font-box">
                  <p>Atengyaaa</p>
                  <div class="clearfix con-time">
                    <div class="fl">
                      <p class="con">赞了你的文章</p>
                    </div>
                    <div class="fr">
                      <p class="time">6个小时前</p>
                    </div>
                  </div>
                  <div class="answer clearFix">
                    <img class="icon fl" src="https://dummyimage.com/40x40">
                    <div class="fl">
                      <p>莉莉</p>
                      <p>文本标签文本标签文本标签</p>
                    </div>
                  </div>

                </div>
              </div>
            </li>
          </ul>

          <div class="next-btn">
            <mt-button type="danger" size="large">加载更多</mt-button>
          </div>

      </div>
  </div>
</template>

<script>

export default {
  name: 'MsgPraise',
  data () {
    return {
      msg: 'message'
    }
  },
        methods: {
          gotoAddress(path){
            this.$router.push(path)
          }
        }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .msg-praise{
    padding: 1rem 0.5rem;
  }


  .msg-content li{
    background:#fff;
    box-sizing:border-box;
    padding:.4rem 0;
    margin-top:.2rem;
  }

  .msg-content li .icon{
    margin-right:.2rem;
  }
  .btn{
    background:#f5f5f5;
    padding:.1rem .4rem;
    border-radius: 2rem;
    color: #707070;
  }
  .question{
    padding:.5rem 0;
  }
  .answer{
    border-radius: 0.2rem;
    box-sizing:border-box;
    padding:.4rem;
    background:#f5f5f5;
  }
  .ask {
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: .8rem;
  }
  .ask .img{
    position: relative;
  }
  .ask .img img{
    width: 2rem;
    border-radius:50%;
  }
  .ask .img-box{
    width: 2rem;

  }
  .ask .font-box{
    width: 12.5rem;
    margin-left: .5rem;
  }
  .ask .time{
    color: #c2c2c2;
  }
  .ask .con{
    color: #c2c2c2;
  }
  .ask .con-time{
    padding: 0.5rem 0;
  }

</style>
